<template>
  <div class="work-design">
    <!-- 左边组件 -->
    <div class="work-design-left">
      <div class="logo-wrapper">
        <div class="logo">
          <img src="@/assets/logo/logo.png" alt="logo">
          工作台配置
        </div>
      </div>
      <el-collapse v-model="leftActive">
        <el-collapse-item v-for="(item, listIndex) in leftComponents" :name="item.type">
          <template slot="title" style="font-size: 20px">
            <b>
              <svg-icon :icon-class="item.icon"></svg-icon>
              <span style="margin-left: 5px">{{ item.title }}</span>
            </b>
          </template>
          <!-- 组件一行两列网格布局 -->
          <div class="left-container">
            <div v-for="componentItem in item.list" class="left-container-item" draggable
                 @dragstart="dragstart(componentItem)"
            >
              <svg-icon :icon-class="componentItem.icon"></svg-icon>
              <span style="color: black; margin-left: 5px">{{ componentItem.name }}</span>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!--  中间渲染区域  -->
    <div class="work-design-center">
      <div ref="layoutContent" style="background-color: #E4E7ED" @dragover="allowDrag" @drop="dropHandler"
           @dragenter="dropEnterHandler"
      >
        <div class="center-top">
          <div></div>
          <div>
            <el-button size="small">保存</el-button>
            <el-button size="small" @click="clearAll">清空</el-button>
            <el-button size="small">预览</el-button>
          </div>
        </div>
        <grid-layout
          style="min-height: 400px"
          :layout.sync="layout"
          :col-num="12"
          :row-height="30"
          :is-draggable="true"
          :is-resizable="true"
          :is-mirrored="false"
          :vertical-compact="true"
          :margin="[10, 10]"
          :use-css-transforms="true"
        >
          <grid-item class="center-action-bar"
                     v-for="(item, index) in layout"
                     :x="item.x"
                     :y="item.y"
                     :w="item.w"
                     :h="item.h"
                     :i="item.i"
                     :key="item.i"
          >
            <div class="center-action-bar-icons" :ref="item.i">
              <i class="el-icon-copy-document center-action-bar-item" @click="copyItem(item.i)"></i>
              <i class="el-icon-s-tools center-action-bar-item" @click="settingItem(item.i)"></i>
              <i class="el-icon-delete-solid center-action-bar-item" @click="removeItem(item.i)"></i>
            </div>
            <div v-if="item.url !== '' && item.url !== null && item.url !== undefined">
             <Commponents :item="item"></Commponents>
            </div>
            <div v-else>
              {{ item.name }}
            </div>
          </grid-item>
        </grid-layout>

      </div>
    </div>
    <!-- 右边属性配置 -->
    <div class="work-design-right">
      属性配置
    </div>
  </div>
</template>

<script>
import VueGridLayout from 'vue-grid-layout'
import { TodoConfig, StatisticsConfig, commConfig } from './config/index'
import Commponents from './components/index.vue'
export default {
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    Commponents
  },
  data() {
    return {
      TodoConfig,
      StatisticsConfig,
      commConfig,
      draging: false,
      layout: [],
      leftComponents: [
        {
          title: '常用型组件',
          type: 'comm',
          icon: 'clipboard',
          list: commConfig
        },
        {
          title: '待办型组件',
          type: 'todo',
          icon: 'documentation',
          list: TodoConfig
        },
        {
          title: '统计型组件',
          type: 'statistics',
          icon: 'chart',
          list: StatisticsConfig
        }
      ],
      leftActive: 'comm',
      currentItem: {}
    }
  },
  methods: {
    dragstart(item) {
      this.draging = true
      this.currentItem = item
    },
    allowDrag(e) {
      e.preventDefault()
      this.dragDom.dispatchEvent(new PointerEvent('pointermove', {
        clientX: event.clientX,
        clientY: event.clientY,
        pointerType: 'mouse',
        bubbles: true
      }))
    },
    dropEnterHandler(event) {
      if (!this.draging) return
      this.draging = false
      const dragLay = { 'x': 24, 'y': 1, 'w': 4, 'h': 3, 'i':  this.genId(),
        name: this.currentItem.name, icon: this.currentItem.icon, url: this.currentItem.url}
      this.layout.push(dragLay)
      this.$nextTick(() => {
        this.dragDom = this.$refs[dragLay.i][0]
        this.dragDom.parentElement.style.transform = `translate3d(${event.clientX - this.contentRect.x - 20}px, ${event.clientY - this.contentRect.y - 20}px, 0px)`
        this.dragDom.dispatchEvent(new PointerEvent('pointerdown', {
          clientX: event.clientX,
          clientY: event.clientY,
          pointerType: 'mouse',
          bubbles: true
        }))
      })
    },
    genId() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0,
          v = c == 'x' ? r : (r & 0x3 | 0x8)
        return v.toString(16)
      })
    },
    dropHandler(event) {
      this.dragDom.dispatchEvent(new PointerEvent('pointerup', {
        clientX: event.clientX,
        clientY: event.clientY,
        pointerType: 'mouse',
        bubbles: true
      }))
    },
    removeItem(val) {
      const index = this.layout.map(item => item.i).indexOf(val)
      this.layout.splice(index, 1)
    },
    copyItem(val) {
      // 找到要复制的组件在 layout 数组中的索引
      const index = this.layout.findIndex(item => item.i === val);
      if (index === -1) return; // 如果找不到组件，直接返回
      // 获取要复制的组件对象
      const originalItem = this.layout[index];
      // 创建一个新的组件对象，位置在原组件下方
      const newItem = {
        ...originalItem,
        i: this.genId(), // 生成新的唯一标识
        y: originalItem.y + originalItem.h // 放置在原组件下方
      };
      // 将新组件对象插入到 layout 数组中
      this.layout.splice(index + 1, 0, newItem);
    },
    settingItem() {

    },
    clearAll() {
      this.$modal.confirm('请确认是否清空?').then(() => {
        this.$set(this, 'layout', [])
      })

    }
  },
  mounted() {
    const content = this.$refs['layoutContent']
    this.contentRect = content.getBoundingClientRect()
  }
}
</script>

<style scoped>
.work-design {
  width: 100%;
  display: flex;
  flex-direction: row;
}

/* 左 */
.work-design-left {
  width: 15%;
  padding: 10px;
  border-top: 1px solid #E4E7ED;
  border-left: 1px solid #E4E7ED;
  border-right: 1px solid #E4E7ED;
}

.logo-wrapper {
  height: 42px;
  background: #fff;
  border-bottom: 1px solid #f1e8e8;
}

.logo {
  line-height: 30px;
  color: #00afff;
  font-weight: 600;
  font-size: 20px;
  white-space: nowrap;
}

.logo > img {
  width: 33px;
  height: 33px;
  vertical-align: top;
}

.left-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列，每列宽度相等 */
  gap: 10px; /* 列之间的间距 */
}

.left-container-item {
  padding: 5px;
  border: 1px solid #E4E7ED;
  border-radius: 4px;
}

.left-container-item:hover {
  background-color: #F1F2F3;
  color: #00afff;
  border: 1px solid #00afff;
}

/* 中间 */
.work-design-center {
  width: 70%;
  border: 1px solid #E4E7ED;
}

.center-action-bar {
  position: relative;
  width: 100%;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
  background-color: white;
  overflow: hidden
}

.center-action-bar:hover .center-action-bar-icons {
  display: block; /* 当鼠标悬停在container上时显示图标组 */
}

.center-action-bar-icons {
  position: absolute;
  top: 10px;
  right: 10px;
  display: none; /* 默认隐藏图标组 */
}

.center-action-bar-item {
  margin-left: 5px;
  cursor: pointer;
}

.center-top {
  padding: 10px;
  height: 50px;
  background-color: white;
  border-bottom: 1px solid #f1e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 右 */
.work-design-right {
  width: 15%;
}


</style>
